<template>
	<base-popup titleT="account.title" :show="profileStore.profileAccountShow" @close="onClose">
		<div class="w-full h-full relative px-[80px] py-12">
			<account-item titleT="account.username" :text="userInfo?.userName" />
			<account-item class="mt-[10px]" titleT="app.region" :text="$t(appStore.regionName)" />
			<account-item
				class="mt-[10px]"
				titleT="app.currency"
				:text="walletStore.balanceCur?.currency" />
			<account-item
				class="mt-[10px]"
				titleT="account.email"
				:text="profileStore.email"
				is-edit
				@click="onClickBinding(BindingTabType.email)" />
			<account-item
				class="mt-[10px]"
				titleT="account.mobile"
				:text="profileStore.mobile"
				is-edit
				@click="onClickBinding(BindingTabType.mobile)" />
			<account-item
				class="mt-[10px]"
				titleT="account.realname"
				:text="userInfo?.realName"
				:is-edit="!userInfo?.realName"
				@edit="realnameShow = true" />
			<account-item
				class="mt-[10px]"
				titleT="account.birthday"
				:text="fmtDate(userInfo?.birthday)"
				:is-edit="!userInfo?.birthday"
				@edit="birthdayShow = true" />
			<account-item class="mt-[10px]" titleT="account.social" is-edit @edit="showSocial = true" />
			<account-item class="mt-[10px]" titleT="account.userId" :text="'' + userInfo?.userId">
				<template #right>
					<base-copy :value="userInfo?.userId"></base-copy>
				</template>
			</account-item>
		</div>
	</base-popup>
	<profile-realname v-model="realnameShow" @success="realnameShow = false" />

	<base-popup
		:modelValue="showResetEmail"
		:isGoBack="true"
		:closable="false"
		@go-back="showResetEmail = false"
		title-t="profile.modifyEmail">
		<reset-email class="px-[35px] pt-10" @close="showResetEmail = false" />
	</base-popup>

	<base-popup
		:modelValue="showResetMobile"
		:isGoBack="true"
		:closable="false"
		@go-back="showResetMobile = false"
		title-t="profile.modifyMobile">
		<reset-mobile class="px-[35px] pt-10" @close="showResetMobile = false" />
	</base-popup>
	<base-popup
		:modelValue="showSocial"
		:isGoBack="false"
		:closable="true"
		@go-back="showSocial = false"
		titleT="account.third.title">
		<bind-social class="px-[35px] pt-10" />
	</base-popup>

	<!--	<profile-binding />-->

	<profile-birthday v-model="birthdayShow" @success="birthdayShow = false" />
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { BindingTabType } from '@/types'
import { fmtDate } from '@/utils'
import AccountItem from './account-item.vue'
import { useAppStore, useProfileStore, useWalletStore } from '@/store'
import ProfileRealname from '@/components/profile/realname/index.vue'
import ProfileBirthday from '@/components/profile/birthday/index.vue'
import { BasePopup, BaseCopy } from '@/components/base'
import ResetEmail from '@/components/profile/reset-email/index.vue'
import ResetMobile from '@/components/profile/reset-mobile/index.vue'
// import ProfileBinding from '@/views/profile/binding/index.vue'
import BindSocial from '@/components/profile/social/index.vue'

defineOptions({ name: 'ViewsProfileAccount' })

const appStore = useAppStore()
const profileStore = useProfileStore()
const walletStore = useWalletStore()

const userInfo = computed(() => profileStore.userInfo)
const showResetEmail = ref(false)
const showResetMobile = ref(false)
const showSocial = ref(false)

const onClickBinding = (type: string) => {
	if (type === BindingTabType.email && !!profileStore.userInfo?.email) {
		return (showResetEmail.value = true)
	} else if (type === BindingTabType.mobile && !!profileStore.userInfo?.mobile) {
		return (showResetMobile.value = true)
	}
	profileStore.setBindingPopupShow(true)
	profileStore.setBindingTab(type)
}

const realnameShow = ref(false)

const birthdayShow = ref(false)

const onClose = () => {
	profileStore.setBindingPopupShow(false)
	profileStore.showProfileAccount(false)
}
</script>
